<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		<style type="text/css">
			*{
				text-decoration: none;
			}
			div.options{
				width: 1000px;
				height: 30px;
				border: 1px solid darkblue;
				margin-left: 20px;
				line-height: 30px;
				margin: 0 auto;
			}
			div.options>span#nameOne{
				margin-left: 120px;
				margin-right: 10px;
			}
			div.options>span#nameTwo{
			margin-left:70px;
			width:20%;
			}
			div.options>span#nameThree{
			margin-left: 50px;
			
			}
			div.goods{
				width: 1000px;
				height: 60px;
				margin: 10px 0px 10px 20px;
				padding-top:20px;
				margin: 0 auto;
			
			}
			div.goods>div.goodspix{
				margin-left: 20px;
				height: 100%;
				float: left;
				margin-right: 40px;
			}
			div.goods>div.goodspix>img{
				width: 50px;
				height: 100%;
				
				
			}
			div.goods>div.goodsName{
			width:15%;	
			height: 100%;
			float: left;
			line-height: 50px;
			margin-right: 40px;
			margin-left:10px;
			}
			div.goods>div.goodsDetails{
				margin-top: 10px;
				font-size: 12px;
				float: left;
				margin-right: 30px;
				width:15%;
			}
			div.goodsa{
				float: left;
				
				margin-right: 40px;
				height:100%;
			}
			div.goodsa>input{
			margin-top:30px;
			}
			div.goods>div.goodsPrice{
				float: left;
				line-height: 50px;
				margin-right: 20px;
			}
			div.goods>div.goodsAmount{
				line-height: 50px;
				margin-right: 30px;
				float: left;
				margin-left: 35px;
				
			}
			div.goods>div.goodsAmount>input{
				width: 40px;
				height: 15px;
				text-align:center;
				
			}
			div.goods>div.goodsTotalPrice{
				line-height: 50px;
				float: left;
				margin-right: 30px;
				margin-left: 20px;
				width:10%;
				text-align: center;
			}
			div.goods>div.goodsdelete{
				float: left;
				margin-left: 30px;
				line-height: 50px;
				
			}
			div.options>span{
				padding-left: 30px;
				padding-right: 40px;
			}
			div.options>span#nameFive{
				margin-left: 30px;
				margin-right: 20px;
			}
			input.Submission{
			display: block;
			width:120px;
			height:60px;
			background-color:red;
			text-align: center;
			line-height: 60px;
			color: #F0F8FF;
			float: right;
			position: absolute;
			top:650px;
			right: 200px;
			}
			input.Submission:hover{
				color:#0000FF;
				
			}
			
		</style>
</head>
<body>	
		
		<div class="options">
				<input type="checkbox"  />全选 
				<span id="nameOne">商品</span>
				<span id="nameTwo">详情</span>
				<span id="nameThree">单价</span>
				<span id="nameFour">数量</span>
				<span id="nameFive">小计</span>
				<span id="nameSix">操作</span>
		</div>
		<form id="form1" action="/J54Books/addOrder" method="post">
		<c:forEach items="${Map}" var="u" >
		<div class="goods">
				<div class="goodsa">
					<input type="checkbox" name="id" value="${u.key.id}"/>
				
				</div>
			
				<div class="goodspix">
					<img src="/J54Books${u.value.defaultPicUrl}"/>
				</div>
				<div class="goodsName">
					${u.value.goodsName }
				</div>
				<div class="goodsDetails">
					作者：${u.value.writer }<br />
					出版社：${ u.value.press}
				
				</div>
				<div class="goodsPrice">
					${u.value.cost}
				</div>
				<div class="goodsAmount">
					<a class="dealadd"  href="javascript:void(0)">+</a>
					<input type="text" name="number" class="textdeal" value="${u.key.bookNumber}" />
					<a class="dealless" href="javascript:void(0)">-</a>
				</div>
				<div class="goodsTotalPrice">
					${u.value.cost*u.key.bookNumber}
				</div>
				<div class="goodsdelete">
					<a  class="delect" href="javascript:void(0)" />删除</a>
				</div>
		
			
		</div>
		</c:forEach>
				
		  		 <input class="Submission" type="submit" value="提交订单">
		  		
	</form>
	<script type="text/javascript">
	
	window.onload=function(){
		
		var counts=0;
		<c:forEach items="${Map}" var="u" varStatus="status">
			var dealadd=document.getElementsByClassName("dealadd")[counts];
			var dealless=document.getElementsByClassName("dealless")[counts];
			var numbers=document.getElementsByName("number")[counts];
			var delect=document.getElementsByClassName("delect")[counts];
			//var delect=document.getElementsByClassName("Submission")[0];
			
			dealadd.index=counts;
			dealless.index=counts;
			numbers.index=counts;
			delect.index=counts;
			delect.onclick=function(){
				
				var url="/J54Books/bookDelect?id=${u.key.id}";
				var req=new XMLHttpRequest();
				req.open("GET",url);
				req.send(null);
				req.onreadystatechange=function(){
					
					if(req.readyState==4){
						
						if((req.status==200||req.status==304)){
							
							alert(req.response);
							//成功删除数据后刷新页面
							location.reload();
							
						}
					}
				}
				
				
			}
			//绑定获得焦点
			numbers.onfocus=function(){
				//失去焦点事件
				document.getElementsByName("number")[this.index].onblur=function(){
					var number=document.getElementsByClassName("textdeal")[this.index].value;
					var stocks=${u.value.stock};
					var j=${u.value.cost};
					if(stocks<number){
						alert("已超过库存上限，请重新输入");
						document.getElementsByClassName("textdeal")[this.index].value="${u.key.bookNumber}";
						document.getElementsByClassName("goodsTotalPrice")[this.index].innerHTML=j*${u.key.bookNumber};
						return;
					}
					if(number<=0){
						alert("输入的值有误，请重新输入");
						document.getElementsByClassName("textdeal")[this.index].value="${u.key.bookNumber}";
						document.getElementsByClassName("goodsTotalPrice")[this.index].innerHTML=j*${u.key.bookNumber};
						return;
					}
					
					
					document.getElementsByClassName("goodsTotalPrice")[this.index].innerHTML=j*number;
					var ids=${u.key.id};
					//3.定请求的URL地址  
					 var url="/J54Books/updateShoppingCartNumber?id="+ids+"&number="+number;
					  
					 //4.创建AJAX的对象
					  var req=new XMLHttpRequest();
					  
					  //5.设置请求的方式，和服务器建立连接通道
					  req.open("GET",url);
					  
					  //6.向服务器发送请求
					  req.send(null);
				
				}
				
			}	
			//+号获得焦点时
			dealadd.onclick=function(){
					//获得当前的对应的value值
					var number=document.getElementsByClassName("textdeal")[this.index].value;
					//获得总库存
					var stocks=${u.value.stock};
					//当库存大于当前输入的值
					if(stocks>number){
					
						number++;
						document.getElementsByClassName("textdeal")[this.index].value=number;
						var j=${u.value.cost};
						document.getElementsByClassName("goodsTotalPrice")[this.index].innerHTML=j*number;
					
 						var ids=${u.key.id};
					//3.定请求的URL地址  
					 var url="/J54Books/updateShoppingCartNumber?id="+ids+"&number="+number;
						 //4.创建AJAX的对象
						  var req=new XMLHttpRequest();
						  
						  //5.设置请求的方式，和服务器建立连接通道
						  req.open("GET",url);
						  
						  //6.向服务器发送请求
						  req.send(null);
						
					}
					if(number==stocks){
						alert("已达上限");
					}
				
			}
			
			dealless.onclick=function(){
				
						
						var number=document.getElementsByClassName("textdeal")[this.index].value;
						var stocks=${u.value.stock};
						if(number>1){
						
							number--;
							document.getElementsByClassName("textdeal")[this.index].value=number;
							var j=${u.value.cost};
							document.getElementsByClassName("goodsTotalPrice")[this.index].innerHTML=j*number;
							var ids=${u.key.id};
							//3.定请求的URL地址  
							 var url="/J54Books/updateShoppingCartNumber?id="+ids+"&number="+number;
							 //4.创建AJAX的对象
							  var req=new XMLHttpRequest();
							  
							  //5.设置请求的方式，和服务器建立连接通道
							  req.open("GET",url);
							  
							  //6.向服务器发送请求
							  req.send(null);
							
						}
						if(number==1){
							alert("已达下限");
						}
					
				
			}	
			
			counts++;
		</c:forEach>
		
	}
	</script>

</body>
</html>